import style from '@/assets/components.module.scss';

import { TopNavigate, useTouchBottom } from '@/components';
import { HttpResponse } from '@/utils';

export interface ProjectProps {
    children?: string | React.ReactElement | React.ReactElement[];
}

type Res = {
    comt: {
        id: number;
        text: string;
        title: string;
        createtime: string;
    };
    user: {
        id: string;
        avatar: string;
        name: string;
        email: string;
    };
}[];

function Rcomt({ page }: { page: number }) {
    const { data: res } = useSwr<HttpResponse<Res>>(`com/${page}`, axios.get);
    const ls = ObjectUtils.wantArray(res?.data);

    const id = localStorage.getItem('id');

    return (
        <div>
            {ls.map((item) => (
                <div key={Math.random()} className={style['post']}>
                    <div className={style['header']}>
                        <div className={style['avatar']}>
                            <img src={item.user.avatar} />
                        </div>
                        <div>
                            <p>
                                <span className='mr-3 font-bold'>
                                    {item.user.name}
                                </span>
                                <span className='text-gray-500'>
                                    @{item.user.email}
                                </span>
                            </p>
                            <p>{item.comt.createtime}</p>
                        </div>
                    </div>
                    <div>
                        <p>{item.comt.text}</p>
                    </div>
                    {id == item.user.id && (
                        <div
                            className={style['del']}
                            onClick={() =>
                                axios
                                    .delete(`com/${item.comt.id}`)
                                    .then(() => location.reload())
                            }>
                            删除
                        </div>
                    )}
                </div>
            ))}
        </div>
    );
}

function Project({ children }: ProjectProps) {
    console.log(time().format('{YYYY} HH:mm:ss'), `NAME render`);

    const [bottom] = useTouchBottom(0);
    const [show, set_show] = useState(false);
    const [page, set_page] = useState(1);
    const [name, set_name] = useState('');
    const [trends, set_trends] = useState<React.ReactElement[]>([]);

    useEffect(() => {
        set_trends([...trends, <Rcomt page={page} key={Math.random()} />]);
    }, [page]);
    useEffect(() => {
        if (bottom) set_page(page + 1);
    }, [bottom]);

    const history = withRouter();
    const id = localStorage.getItem('id');
    if (id == null) {
        history.push('/login');
    }

    return (
        <>
            <div className={style['post-ctx']}>
                <TopNavigate />
                <article className={`p-3`}>
                    <div style={{ display: 'none' }}>
                        <Rcomt page={page + 1} />
                    </div>
                    {trends}
                </article>
                <button
                    onClick={() => set_show(!show)}
                    className={style['add']}>
                    Add
                </button>
                {show && (
                    <div className={style['add-item']}>
                        <p>发表评论</p>
                        <textarea
                            onChange={(e) => {
                                set_name(e.target.value);
                            }}
                        />
                        <button
                            onClick={() => {
                                // 用fetch发起post提交数据
                                axios
                                    .post('com', {
                                        uid: id,
                                        tid: 1,
                                        text: name,
                                    })
                                    .then((res) => {
                                        set_show(false);
                                        location.reload();
                                    });
                            }}>
                            发布
                        </button>
                    </div>
                )}
            </div>
        </>
    );
}

export default Project;
